<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浩盛Todo - 首页</title>
    {{template "imports"}}
    <style>
        #add-task-btn {
            color: var(--hx-link-color);
            text-decoration: none;
            transition: color 160ms ease-in-out;
        }

        #add-task-btn:hover {
            color: var(--hx-link-hover-color);
        }

        #alert-popup {
            position: fixed;
            bottom: 6%;
            left: 3%;
        }
    </style>
</head>
<body>
<div class="container">
    {{template "nav" .}}
    <article>
        <h1 class="m-5 d-inline-block">{{ .Word }}，开始你的工作吧！</h1>
        <a href="/task/add" class="d-inline-flex" id="add-task-btn">
            <i class="bi bi-plus-circle" style="font-size: 2em; align-self: center;"></i>
            <span style="font-size: 1.5em; align-self: center;">添加任务</span>
        </a>
    </article>
</div>
<div class="d-none alert alert-dismissible fade" id="alert-popup">
    <button class="btn btn-close" data-bs-dismiss="alert"></button>
    <span>{{ .Msg }}</span>
    <span class="d-none">{{ .MsgType }}</span>
</div>
<script>
    $(function () {
        const alertPopup = $("#alert-popup");
        const alertPopupSpans = $("#alert-popup span");
        const msg = $(alertPopupSpans).find("span:first-child").html();
        const m2aTypes = {"error": "danger", "success": "success"};
        if (msg !== "") {
            alertPopup.addClass("alert-" + m2aTypes["{{ .MsgType }}"]);
            alertPopup.removeClass("d-none");
            alertPopup.addClass("show");
            setTimeout(function () {
                alertPopup.removeClass("show");
                alertPopup.addClass("hide");
                alertPopup.removeClass("alert-" + m2aTypes["{{ .MsgType }}"]);
            }, 5000);
        }
    });
</script>
</body>
</html>